
import React from 'react';
import './dom1.scss'
import { Button, Space ,Divider ,Table, Modal, Form, Input, Checkbox} from 'antd';
// import { useHistory,useLocation ,useRouteMatch, useParams} from 'react-router-dom';

// console.dir(useLocation)
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];
const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        key: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
    });
}

class Dom1 extends React.Component{

state={
    columns : [],
    data : [],
    show:false,
    select:1

}
    selectFm(index){

        this.setState({select:index},()=>{
            this.queryList()
        })
    }
    queryList(){
        const data = [
            {
                key: '1',
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park',
                tags: ['nice', 'developer'],
            },
            {
                key: '2',
                name: 'Jim Green',
                age: 20,
                address: 'London No. 1 Lake Park',
                tags: ['loser'],
            },
            {
                key: '3',
                name: 'Joe Black',
                age: 16,
                address: 'Sydney No. 1 Lake Park',
                tags: ['cool', 'teacher'],
            },
        ];
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
                render: (text) => <a>{text}</a>,
            },
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '状态',
                dataIndex: 'age',
                render: text => text>=18? '已成年':'未成年'
            },
            {
                title: '备注',
                dataIndex: 'address',
                key: 'address',
            },

            {
                title: '操作',
                key: 'action',
                render: (_, record) => (
                    <Space size="middle">
                        <a>完成</a>
                        <a>删除</a>
                    </Space>
                ),
            },
        ];

        this.setState({
            data:this.state.select === 0||2 ? data : [],
            columns:this.state.select === 0||2 ? columns : []
        })
        console.log(this.state.select)
    }
    // 请求数据的生命周期
    componentDidMount() {
       this.queryList()
    }

    render() {
    let {show ,select } = this.state
        return (
            <>
                <div className={'box'}>
                    <div className={'title'}>
                        <h2>哈哈哈啊哈哈哈</h2>
                        <Button  type="primary" size={'small'} onClick={()=>{this.setState({show:true})}}>新增任务</Button>
                    </div>
                    <Divider/>

                    <Space wrap>
                        { ['全部','未完成','已完成'].map( (item , index ) => {
                           return  <Button type={select === index ? 'primary':'default'}  key={index} onClick={() => this.selectFm(index)}>{item}</Button>
                        }) }
                    </Space>

                    <Table columns={this.state.columns} dataSource={this.state.data} />
                </div>


                <Modal  open={show}  title="哈哈哈哈哈哈" onOk={()=>{this.setState({show:false})}} onCancel={()=>{this.setState({show:false})}} >
                    <Form name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} initialValues={{ remember: true }} autoComplete="off" >
                        <Form.Item
                            label="Username"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                            >
                            <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                        <Input.Password />
                </Form.Item>
    </Form>

                </Modal>

            </>

        )
    }
}

// function Fn (Dom){
//     return function Hoc (prop){
//         const  search = useLocation()
//         const   history = useHistory()
//         const   match = useRouteMatch()
//
//         return <Dom {...prop} history={history} useLocation={useLocation} match={match}/>
//     }
// }

// export default Fn(Dom1);
export default Dom1;

